<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播图（左右移动）</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/animate.min.js"></script>
</head>

<body>
    <div id="pic_box">
        <ul id="scrollBall">
            <li>
                <a href="#"><img src="image/p1.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="image/p2.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="image/p3.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="image/p4.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="image/p5.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="image/p6.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="image/p1.jpg" alt=""></a>
            </li>
        </ul>
        <p id="point_btns">
            <a class="high_light" href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </p>
        <a class="hide" id="prev" href="javascript:;">&lt;</a>
        <a class="hide" id="next" href="javascript:;">&gt;</a>
    </div>
</body>
<script src="js/main.js"></script>

</html>
